<template>
  <div class="app-container">
    <div class="bg-container">
      <el-form ref="queryRef" :inline="true" :model="form" label-suffix=":">
        <!-- <el-row justify="start" style="margin-bottom: 20px;">

          <el-button plain type="primary" @click="handleUpdate(scope.row)">
            <img alt="Clean Icon" src="@/assets/imgs/clean.svg" style="width: 20px; height: 20px;"/>
          </el-button>

          <el-button icon="VideoPause" plain type="danger" @click="handleDelete(scope.row)">
          </el-button>
        </el-row> -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="查询类型">
              <el-radio-group v-model="searchType">
                <el-radio :value="1">技术组件</el-radio>
                <el-radio :value="2">主机</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="searchType == 1">
            <el-form-item label="技术组件">
              <!-- 选择框内容 -->
              <el-select v-model="form.component_name" placeholder="请选择技术组件" style="width: 320px">
                <el-option v-for="item in allComponentList" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="searchType == 1">
            <el-form-item label="日志级别">
              <!-- 选择框内容 -->
              <el-select v-model="form.log_level" placeholder="请选择日志级别" style="width: 320px">
                <el-option v-for="item in logLevel" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="searchType == 2">
            <el-form-item label="主机">
              <!-- 选择框内容 multiple-->
              <el-select v-model="form.computer_name" placeholder="请选择主机" style="width: 320px">
                <el-option v-for="item in allComputerList" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="8">
            <el-form-item label="日志日期" prop="createTime">
              <el-date-picker v-model="form.log_date" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button icon="Search" type="primary" @click="bindSearch">搜索</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
            <!-- <el-button icon="Download" plain type="warning" @click="handleExport">导出
            </el-button> -->
          </el-col>
          <!-- <right-toolbar  v-model:showSearch="showSearch" @queryTable="bindSearch"></right-toolbar> -->
        </el-row>
      </el-form>



      <el-table v-loading="loading" :data="tableData" :show-overflow-tooltip="true" :stripe="true"
        @selection-change="handleSelectionChange" height="400px">
        <el-table-column label="日志内容" align="center" prop="message" />
      </el-table>

      <el-pagination v-model:current-page="pageInfo.pageNo" v-model:page-size="pageInfo.pageSize"
        :page-sizes="[3, 5, 7, 10]" :total="pageInfo.total" layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; justify-content: flex-end" @size-change="bindPageSizeChange" @current-change="binfPageNoChange" />
    </div>

    <!-- 添加或修改主机 -->
    <!-- <el-dialog v-model="open" :title="title" append-to-body width="600px">
      <el-form ref="computerRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="主机名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入主机名称" />
        </el-form-item>
        <el-form-item label="主机IP地址" prop="ipAddress">
          <el-input v-model="form.ipAddress" placeholder="请输入主机IP地址" />
        </el-form-item>
        <el-form-item label="主机的注意事项" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入主机的注意事项" />
        </el-form-item>
        <el-form-item label="主机用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入主机用户名" />
        </el-form-item>
        <el-form-item label="主机密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入主机密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> -->

  </div>
</template>

<script name="LogRealtime" setup>
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
import { addComputer, exportComputer, listComputer, updateComputer, listAllComputer, getAllComponent, getLogComponent, getLogComputer } from "@/api/computer";
import { listComponentCategory } from "@/api/componentCategory"

import { parseTime } from "@/utils/utils";

const { proxy } = getCurrentInstance();

const loading = ref(false);
const tableData = ref([]);
const searchType = ref(1); // 1: 组件 2: 主机
const logLevel = ["error", "info", "warn", "fatal", "debug"]; // 日志级别
const pageInfo = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
});
const form = reactive({
  component_name: '',
  component_flag: 0,
  computer_name: '',
  log_level: 'error',
  log_date: new Date().Format("yyyy.MM.dd"),
})



// 查询事件
const bindSearch = async () => {
  const stype = searchType.value;
  if(stype == 1){ // 组件
    await getLogComponentQuery();
  }else{ // 主机
    await getLogComputerQuery();
  }
}

// 技术组件列表查询
const getLogComponentQuery = () => {
  const { component_name = undefined, component_flag = undefined, log_level = undefined, log_date = undefined } = form;
  if(!component_name){
    proxy.$message.info("请选择技术组件后查询");
    return
  }
  const params = {
    component_name,
    component_flag,
    log_level,
    log_date: log_date ? log_date.replaceAll("-", ".") : undefined,
  }
  getLogComponent(params).then(response => {
    if (response.data) {
      tableData.value = response.data;
      pageInfo.total = response.data.total;
    }
  })
}
// 主机列表查询
const getLogComputerQuery = () => {
  const { computer_name = undefined, log_date = undefined } = form;
  if(!computer_name){
    proxy.$message.info("请选择主机后查询");
    return
  }
  const params = {
    computer_name,
    log_date: log_date ? log_date.replaceAll("-", ".") : undefined,
  }
  getLogComputer(params).then(response => {
    if (response.data) {
      tableData.value = response.data;
      pageInfo.total = response.data.total;
    }
  })
}

const allComputerList = ref([]);
// 查询主机
const getAllComputer = () => {
  listAllComputer().then(response => {
    if (response.data) {
      allComputerList.value = response.data;
      // 默认填充第一个有数据才请求列表
      if(allComputerList.value.length > 0){
        form.computer_name = allComputerList.value[0].name;
        getLogComputerQuery();
      }
    }
  });
}
// 查询所有组件
const allComponentList = ref([]);
const getAllComponentQuery = () => {
  getAllComponent().then(response => {
    if (response.data) {
      allComponentList.value = response.data;
      // 默认填充第一个 有数据才请求列表
      if(allComponentList.value.length > 0){
        form.component_name = allComponentList.value[0].name;
        getLogComponentQuery();
      }
    }
  });
}

const bindPageSizeChange = (size) => {
  pageInfo.pageSize = size;
  bindSearch();
}

const binfPageNoChange = (page) => {
  pageInfo.pageNo = page;
  bindSearch();
}

// 表单重置
function reset() {
  form.component_name = '';
  form.component_flag = 0;
  form.computer_name = '';
  log_level = 'error',
  log_date = new Date().Format("yyyy.MM.dd"),
  proxy.resetForm("queryRef");

}

// 搜索按钮操作
function handleQuery() {
  queryParams.value.pageNo = 1;
  bindSearch();
}

// 重置按钮操作
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}


// 提交按钮
function submitForm() {
  proxy.$refs["computerRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateComputer(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          bindSearch();
        });
      } else {
        addComputer(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          bindSearch();
        });
      }
    }
  });
}


// 导出按钮操作
function handleExport() {
  exportComputer(queryParams.value)
}


const init = async () => {
  await getAllComputer();
  await getAllComponentQuery();
}

init()
</script>